<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>加班申请</title>
<script type="text/javascript" src="static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/easyui/themes/metro-blue/easyui.css">
<style type="text/css"></style>
</head>
<body>
<style type="text/css">
	body{
		background-color:#F3F3F3;
	}
	*{
		margin:0px;
		padding:0px;
	}
	.background{
		width:1000px;
		height: 550px;
		background-color:#fff;
		margin:20px auto;
		padding:20px;
	}
	.apply-news{
		width:900px;
		height:30px;
		border-bottom:1px solid #EDEDED;
		margin:0px auto;
	}
	.text-news{
		width:100px;
		height:30px;
		color: #1AB394;
    	font-weight: 700;
    	font-size:14px;
	}
	.apply-content{
		width:900px;
		height: 271px;
		margin:0px auto;
		margin-top:20px;
	}
	.apply-center{
		width:800px;
		height: 270px;
		margin:0px auto;
	}
	.center,.center-1,.center-2,.center-3,.center-5{
		width:800px;
		height:30px;
		margin: 20px 0px;
	}
	.center-4{
		height:60px;
	}
	.jqlx,.text-xjsh,.apply-xjsc,.shenqing,.fujian{
		width:80px;
		height:25px;
		font-weight: 700;
		font-size:14px;
		color: #6E6E6E;
		margin-top:3px;
		float:left;
	}
	.select-option{
		width:100px;
		height:25px;
		border:1px solid #CCCCCC;
		border-radius:4px;
		font-size:14px;
	}
	#date-kaishi,#date-jieshu{
		width:180px;		
	}
	.textbox-invalid,.validatebox-invalid{
		border:1px solid #CCCCCC;
		background-color: #fff;
		border-radius:4px;		
		height:24px;
		font-size:14px;
		line-height: 24px;
	}
	.textbox{
		border-radius:4px;
		height:24px;
		border:1px solid #CCCCCC;
		margin-left:30px;
	}
	#day{
		width:180px;
		height:24px;
		border:1px solid #CCCCCC;
		border-radius:4px;
	}
	.tian{
		width: 36px;
	    height: 22px;
	    background-color: #EEEEEE;
	    border-left: 1px solid #CCCCCC;
	    float: right;
	    margin-right: 288px;
	    position: relative;
	   	right: 251px;
	    top: 1px;
	    font-size: 14px;
	    line-height: 22px;
	    color:#6E6E6E;
	    text-indent: 10px;
	}
	.apply-zhi{
		width: 24px;
	    height: 24px;
	    float: right;
	    color: #6E6E6E;
	    position: relative;
	    right: 338px;
	}
	.rili{
		width: 700px;
	    height: 30px;
	    float: left;
	    margin-left: -31px;
	}
	.tishi{
		width: 200px;
	    height: 30px;
	    color: #6E6E6E;
	    font-size: 11px;
	    float: right;
	    margin-right: -52px;
	    margin-top: 3px;	
	}
	.textarea{
		width: 642px;
    	height: 50px;
		border:1px solid #CCCCCC;
		border-radius:4px;
	}
	.select-file{
		width: 120px;
	    height: 28px;
	    border-radius: 5px;
	    background-color: #30B399;
	    color: #FFF;
	    font-weight: 700;
	    border: 1px solid #fff;
	}
	.span-text,.span-file{
		font-size:12px;
		color:#6E6E6E;
	}
	.span-file{
		margin-left:130px;
	}
	.noselect{
		width: 637px;
	    height: 60px;
	    border-top: 1px solid #EEEEEE;
	    margin: 0 auto;
	    margin-top: 20px;
	    color: #bfbfbf;
		text-align: center;
    	font-size: 24px;
    	line-height: 55px;
	}
	.apply-end{
		width:900px;
		height: 372px;
		margin:0px auto;		
	}
	.spr{
		width:60px;
		height:25px;
		font-size:12px;
		color: #1AB394;
    	font-weight: 700;
    	font-size:14px;
	}
	.spr-box{
	    width: 898px;
	    height: 160px;
	    border: 1px solid #E5E6E7;
	    min-height: 130px;
	    background-color: rgba(255,255,255,1);
	    box-sizing: border-box;
	    border-width: 1px;
	    border-style: solid;
	    border-color: rgba(229,230,231,1);
	    border-radius: 2px;
	    position: relative;
	    padding: 20px;
	}
	
	.tijiao,.fanhui{
		width: 75px;
	    height: 30px;
	    color: white;
	    cursor: pointer;
	    text-align: -webkit-center;
	    font-size: 15px;
	    margin: 5px 15px;
	    border: none;
	    border-radius: 2px;
	}
	.btn-div{
		width: 450px;
	    height: 40px;
	    position: fixed;
	    top: 600px;
	    left: 650px;
	}
	.tijiao{
		background: url(static/easyui/themes/icons/queding.png) no-repeat 10% 50%;
    	background-color: #19AA8D;
	}
	.fanhui{
		background: url(static/easyui/themes/icons/fanhui.png) no-repeat 10% 50%;
    	background-color: #F4A328;
	}
	
	.pic{
		width: 80px;
	    height: 100px;
	    margin-right: 50px;
	    float: left;
	    position: relative;
	}
	.pic div{
		text-align: center;
	}
	.pic img{
		width: 80px;
	    height: 80px;
	    border-radius: 50%;
	    vertical-align: middle;
	}
	.textsex{
		width: 16px;
	    height: 16px;
	    background-color: rgba(24,166,137,1);
	    position: absolute;
	    line-height: 20px;
	    right: 4px;
	    top: 65px;
	    border-radius: 50%;
	}
	.report-pic{
		padding-top: 10px;
	    font-size: 15px;
	    color: #666;
	}
	
	.modal{
		overflow-x: hidden;
    	overflow-y: auto;
    	opacity: 1;
    	position: fixed;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    z-index: 1050;
	    outline: 0;
	    display: none;
	}
	.modal-dialog{
		transform: translate(0,0);
		width: 600px;
    	margin: 30px auto;
    	position: relative;
	}
	.modal-content{
		border: none;
    	border-radius: 4px;
    	box-shadow: 2px 2px 6px rgba(0,0,0,.349019607843137);
    	position: relative;
    	background-color: #fff;
    	background-clip: padding-box;
    	outline: 0;
    	font-size: 12px;
    	color: #999;
	}
	.modal-header{
		padding: 6px 15px;
		min-height: 16.42857143px;
		border-bottom: 1px solid #e5e5e5;
	}
	.modal-body{
		overflow-y: auto;
    	max-height: 401px;
    	padding: 8px 15px;
    	position: relative;
	}
	.modal-footer{
		padding: 5px 10px;
		text-align: right;
		height:30px;
    	border-top: 1px solid #e5e5e5;
	}
	.modal-footer button{
		padding: 2px 12px;
	    font-size: 12px;
	    border-radius: 3px;
	    border: 1px solid transparent;
	    margin-bottom: 0;
    	margin-left: 5px;
	}
	.btn-close{
		color: #666;
    	background-color: #fff;
    	border-color: #e5e6e7!important;
	}
	.btn-yes{
		color: #fff!important;
    	background-color: #19AA8D!important;
    	border-color: #19AA8D!important;
	}
	.close{
		padding: 0px;
	    opacity: 1;
	    transition: all linear .2s;
	    margin-top: -2px;
	    border: 0;
	    float: right;
	    font-size: 21px;
	    font-weight: 700;
	    line-height: 1;
	    color: #000;
	    text-shadow: 0 1px 0 #fff;
	}
	.modal-backdrop{
		position: fixed;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    z-index: 1040;
	    background-color: #000;
	    opacity: .5;
	    display: none;
	}
	h3{
	    font-size: 14px;
	    font-weight: 700;
	    font-style: normal;
	    margin: 0;
    	line-height: 1.42857143
	}
	.modal-form-group{
		margin: 10px;
    	height: 127px;
	    border: 1px solid #ccc;
	    border-radius: 4px;
	    padding: 10px 8px;
	}
	.modal-form-group span{
		font-size: 14px;
		font-weight: 400;
		
	}

	.staff{
		float: left;
	    margin-right: 15px;
	    border-radius: 9px;
	    background-color: #e2f2ff;
	    padding: 5px 10px;
	    margin-bottom: 5px;
	    text-align: center;
	    width: 104px;
	    height: 30px;
	    position: relative;
	}
	.staff-text{
		cursor: pointer;
		box-sizing: border-box;
	}
	.staff-close{
		float: right;
	    cursor: pointer;
		position: relative;
	    top: 3px;
	    display: inline-block;
	    font-family: 'Glyphicons Regular';
	    font-style: normal;
	    font-weight: 400;
	    line-height: 1;
	    -webkit-font-smoothing: antialiased;
	}
	#zhui{
		width:50px;
		height:20px;
		border-radius: 10px;
		position: relative;
		float: left;
	}
	.kai{
		background-color:#19AA8D!important;
		border-color:#19AA8D!important;
	}
	.guan{
		background-color:gainsboro;
		border-color:gainsboro;
	}
	#yuan{
		width:20px;
		height:20px;
		background-color:#ffffff;
		border-color:#ffffff;
		border-radius: 25px;
		position: absolute;
	}
	.text{
		color:#bfbfbf;
		font-size: 12px;
		
	}
	.input-text{
    	height: 25px;
    	font-weight: 700;
    	font-size: 14px;
    	color: #6E6E6E;
    	margin-top: 3px;
    	float: left;
	}
	.textbox .combo{
		margin: 0px;
	}
	.center{
		margin-bottom: 20px;
	}
	.shengpi{
		display: block;
    	color: #1AB394;
    	font-weight: 700;
	}
	.center-body{
		margin: 10px 0px;
	    min-height: 130px;
	    background-color: rgba(255,255,255,1);
	    box-sizing: border-box;
	    border-width: 1px;
	    border-style: solid;
	    border-color: rgba(229,230,231,1);
	    border-radius: 2px;
	    position: relative;
	    padding: 20px;
	}
	.pic{
		width: 80px;
	    height: 100px;
	    margin-right: 50px;
	    float: left;
	    position: relative;
	}
	.pic div{
		text-align: center;
	}
	.pic img{
		width: 80px;
	    height: 80px;
	    border-radius: 50%;
	    vertical-align: middle;
	}
	.textsex{
		width: 16px;
	    height: 16px;
	    background-color: rgba(24,166,137,1);
	    position: absolute;
	    line-height: 20px;
	    right: 4px;
	    top: 65px;
	    border-radius: 50%;
	}
	.report-pic{
		padding-top: 10px;
	    font-size: 15px;
	    color: #666;
	}
	
</style>
<script type="text/javascript">

$(function(){
	$('#cc').combogrid({
		    panelWidth:200,
		    idField:'name',
		    textField:'name',
		    url:'jiabantype',
		    columns:[[
		    {field:'id',title:'编号',hidden:true,width:60},
		    {field:'idd',title:'序号',width:100},
		    {field:'name',title:'加班类型',width:100},
		    ]],
		    onClickRow:function(rowIndex, rowData){
	    		$("#type").val(rowData['id']);
	    		if(rowData['id']==0){
	    			$("#sj").html("加班小时：");
	    		}else{
	    			$("#sj").html("加班天数：");
	    		}
	    	}
	});
	$(".fanhui").click(function(){
		$("#content-admin").panel('open').panel('refresh','people');
	});
	$(".tijiao").click(function(){
		var type=$("#type").val();
		var tian=$("#tian").val();
		var date=$("#date-kaishi").datebox('getValue');
		var why=$(".textarea").val();
		if(type==""||tian==""||date==""||why==""){
			cuowu("请将信息填写完整")
		}else{
			var time=new Date().Format("yyyy-MM-dd");
			if(time<=date){
				$.ajax({
					url:"overpan",
					type:"post",
					data:{"type":type,"tian":tian,"date":date}, 
					success:function(data){
						if(data==""){
							$.ajax({
								url:"add_overtime",
								type:"post",
								data:{"date":date,"oWhy":why,"type":type,"tian":tian}, 
								success:function(result){
									$("#content-admin").panel('open').panel('refresh','people');
								}
							})
						}else{
							cuowu(data);
						} 
					}
				})
			}else{
				cuowu("加班开始时间不能为已过日期")
			}
		}
	});
	
});
Date.prototype.Format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "H+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
function cuowu(text){
	var div=$("<div>");
	var img=$("<img>");
	var span=$("<span>");
	div.addClass("bug");
	img.attr("src","static/easyui/themes/icons/cuowu.png");
	span.addClass("cuowu-tishi");
	span.html(text);
	div.append(img);
	div.append(span);
	$(".cuowudiv").append(div);
	var timer=setTimeout(function () {
		div.slideUp("fast");
		div.remove();
	}, 2000);
}

</script>
	<div class="background">
		<div class="apply-news">
			<div class="text-news">加班申请</div>
		</div>
		<div class="apply-content">
			<div class="apply-center">
				<div class="center-1">
					<div class="jqlx">加班类型:</div>
					<input id="cc">
					<input type="hidden" id="type" name="type">
				</div>
				<div class="center-2">
					<div class="text-xjsh">开始时间：</div>
					<div class="rili">
					<input id="date-kaishi" type="text" class="easyui-datebox"  data-options="required:true,showSeconds:false"  name="oKai">
					</div>
				</div>
				<div class="center-2">
					<div class="text-xjsh" id="sj">加班天数：</div>
					<div class="rili">
					<input type="text" id="tian" name="tian" class="easyui-numberbox"  data-options="min:0,max:5">
					</div>
				</div>
				<div class="center-4">
					<div class="shenqing">申请事由：</div>
					<textarea class="textarea" name="oWhy" ng-maxlength="500" cols="2"></textarea>
				</div>
				<div class="center">
					<span class="shengpi">审批人</span>
					<div class="center-body">
						<div class="pic">
							<img src="${staff.Staff_tupian==null?'static/easyui/themes/icons/notui.jpg':'' }${staff.Staff_tupian}"/>
							<div class="textsex"></div>
							<div class="report-pic">${staff.Staff_name }</div>
						</div>
					</div>
				</div>
				<div class="btn-div">
					<button class="tijiao">提交</button>
					<button class="fanhui">返回</button>
				</div>
			</div>
		</div>
	</div>
</body> 